<%--
  Created by IntelliJ IDEA.
  User: YuanDali
  Date: 2020/7/20
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- site metas -->
    <title>电影</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap css -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <!-- style css -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Responsive-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- fevicon -->
    <link rel="icon" href="images/fevicon.png" type="image/gif" />
    <!-- Scrollbar Custom CSS -->
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <!-- Tweaks for older IEs-->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!-- owl stylesheets -->
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/jquery.fancybox.min.css" media="screen">
    <link href="css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- header section start -->
<div class="header_section">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="logo" href="index.jsp"><img src="images/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="${pageContext.request.contextPath}/front/index.jsp">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/front/movies.jsp">影片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/front/tv.jsp">影院</a>
                </li>
            </ul>
            <%--            <div class="search_icon"><a href="#"><img src="images/notification-icon.png"><span class="padding_left_15">Notificastion</span></a></div>
                        <div class="search_icon"><a href="#"><img src="images/eye-icon.png"><span class="padding_left_15">Viwe</span></a></div>--%>

            <div class="search_icon"><a href="/front/login.jsp"><img src="images/user-icon.png" id="accountImg" ><span class="padding_left_15" id="accountLoginName">登录</span></a></div>
            <div class="search_icon"><a href="#"><img src="images/notification-icon.png"><span class="padding_left_15">联系客服</span></a></div>

            <div class="search_icon" style="z-index: 2">
                <a href="order.jsp"  ><span class="padding_left_15"  >个人订单</span></a>
            </div>
            <div class="search_icon" style="z-index: 2">
                <a href="collect.jsp"  ><span class="padding_left_15"  >收藏夹</span></a>
            </div>
            <div class="search_icon" style="...">
                <a href="admin-info.jsp?accountName=${sessionScope.account.accountName}"  ><span class="padding_left_15" id="" >个人中心</span></a>
            </div>
        </div>
    </nav>
</div>
<!-- header section end -->
<!-- movies section start -->

<div class="movies_section layout_padding">

    <div class="box_search">
        <div class="search_main">
            <!--<input type="text" class="search" placeholder="找电影、影院" name="kw">-->
            <input type="text" class="search_input" id="search_input" placeholder="找电影、影院" name="kw">
            <div class="search_btn">
                <input type="button" id="search_button" value="搜索">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="movies_menu">
            <ul id="areaSelect">
                <li><a href="#">地区：</a></li>
                <li class="active"><a href="#">全部</a></li>
                <li><a href="#">中国</a></li>
                <li><a href="#">美国</a></li>
                <li><a href="#">日本</a></li>
                <li><a href="#">韩国</a></li>
                <li><a href="#">香港(中国)</a></li>
                <li><a href="#">台湾(中国)</a></li>
                <li><a href="#">印度</a></li>
                <li><a href="#">俄罗斯</a></li>
                <li><a href="#">加拿大</a></li>
                <li><a href="#">法国</a></li>
                <li><a href="#">英国</a></li>
                <li><a href="#">澳大利亚</a></li>
                <li><a href="#">德国</a></li>
                <li><a href="#">泰国</a></li>
                <li><a href="#">意大利</a></li>
                <li><a href="#">芬兰</a></li>
                <li><a href="#">西班牙</a></li>
                <li><a href="#">其他</a></li>
            </ul>
            <ul id="typeSelect">
                <li><a href="#">类型：</a></li>
                <li class="active"><a href="#">全部</a></li>
                <li><a href="#">喜剧</a></li>
                <li><a href="#">动作</a></li>
                <li><a href="#">战争</a></li>
                <li><a href="#">爱情</a></li>
                <li><a href="#">暴力</a></li>
                <li><a href="#">奇幻</a></li>
                <li><a href="#">神话</a></li>
                <li><a href="#">恐怖</a></li>
                <li><a href="#">犯罪</a></li>
                <li><a href="#">武侠</a></li>
                <li><a href="#">剧情</a></li>
                <li><a href="#">魔幻</a></li>
                <li><a href="#">冒险/奇幻</a></li>
            </ul>
        </div>
        <div class="movies_section_2 layout_padding">
            <h2 class="letest_text">正在热映</h2>
            <div class="seemore_bt"><a href="#">更多</a></div>
            <div class="movies_main">
                <div class="iamge_movies_main" id="hotMovies">
                    <%--<div class="iamge_movies">
                        <div class="image_3">
                            <img src="images/img-3.png" class="image" style="width:100%">
                            <div class="middle">
                                <div class="playnow_bt">Play Now</div>
                            </div>
                        </div>
                        <h1 class="code_text">CADE Prlor</h1>
                        <p class="there_text">There are many variations </p>
                        <div class="star_icon">
                            <ul>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                            </ul>
                        </div>
                    </div>--%>
                </div>
            </div>
            <div class="black" id="black1">
                <%--<span class="disabled"> &lt; </span>
                <span class="current">1</span>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#">6</a>
                <a href="#">7</a>...
                <a href="#">199</a>
                <a href="#">200</a>
                <a href="#"> &gt; </a>--%>
            </div>
        </div>
        <div class="movies_section_2 layout_padding">
            <h2 class="letest_text">即将上映</h2>
            <div class="seemore_bt"><a href="#">更多</a></div>
            <div class="movies_main">
                <div class="iamge_movies_main" id="waitMovies">
                    <%--<div class="iamge_movies">
                        <div class="image_3">
                            <img src="images/img-8.png" class="image" style="width:100%">
                            <div class="middle">
                                <div class="playnow_bt">Play Now</div>
                            </div>
                        </div>
                        <h1 class="code_text">CADE Prlor</h1>
                        <p class="there_text">There are many variations </p>
                        <div class="star_icon">
                            <ul>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                                <li><a href="#"><img src="images/star-icon.png"></a></li>
                            </ul>
                        </div>
                    </div>--%>

                </div>
            </div>
        </div>
        <div class="black" id="black2">
            <%--<span class="disabled"> &lt; </span>
            <span class="current">1</span>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#">7</a>...
            <a href="#">199</a>
            <a href="#">200</a>
            <a href="#"> &gt; </a>--%>
        </div>

        <div class="seebt_1"><a href="#">更多</a></div>
    </div>
</div>
<!-- movies section end -->
<!-- footer  section start -->
<div class="footer_section layout_padding">
    <div class="container">
        <div class="footer_menu">
            <ul>
                <li><a href="{pageContext.request.contextPath}/front/index.jsp">首页</a></li>
                <li><a href="{pageContext.request.contextPath}/front/movies.jsp">影片</a></li>
                <li><a href="{pageContext.request.contextPath}/front/tv.jsp">影院</a></li>
                <!--<li><a href="celebs.html">Celebs</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">News</a></li>-->
            </ul>
        </div>
        <div class="social_icon">
            <ul>
                <li><a href="#"><img src="images/fb-icon.png"></a></li>
                <li><a href="#"><img src="images/twitter-icon.png"></a></li>
                <li><a href="#"><img src="images/linkedin-icon.png"></a></li>
                <li><a href="#"><img src="images/instagram-icon.png"></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- footer  section end -->
<!-- copyright section start -->
<div class="copyright_section">
    <div class="container">
        <div class="copyright_text">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
    </div>
</div>
<!-- copyright section end -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
<!-- javascript -->
<%--<script src="js/owl.carousel.js"></script>--%>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/gijgo.min.js" type="text/javascript"></script>

<script>
   $(document).ready(function () {

       //获取用户Name
       var accountName ="${sessionScope.account.accountName}";
       if ( accountName != undefined){
           $("#accountImg").prop("src","../fileDownload/${sessionScope.account.facePicture}");
           $("#accountImg").css({"width":"50px","height":"50px","border-radius":"50%"});
           $("#accountLoginName").text(accountName);
       }

        var pageNum  = 1;
        var pageSize = 5;
        /*var showStatus = 0;*/
        // 页面一进入请求分页数据
        // 正在热映
        sendAjax(pageNum,pageSize,0);
        // 即将上映
        sendAjax2(pageNum,pageSize,1);

        // 分页点击事件（正在热映）
        $(document).on("click","#black1 a",function () {
            var pageNum = $(this).prop("title"); // 每一个a标签的title属性值就是页码
            // 发送请求
            sendAjax(pageNum,pageSize,0);
        });

        // 分页点击事件（即将上映）
        $(document).on("click","#black2 a",function () {
            var pageNum = $(this).prop("title"); // 每一个a标签的title属性值就是页码
            // 发送请求
            sendAjax2(pageNum,pageSize,1);
        });

        // 电影地区选择事件
        $("#areaSelect li").click(function () {
            // 去掉所有的active样式
            $("#areaSelect li").removeClass("active");
            // 为自己添加active样式
            $(this).addClass("active");
            // 发送请求
            sendAjax(pageNum,pageSize,0);
        });

        // 电影类型选择事件
        $("#typeSelect li").click(function () {
            // 去掉所有的active样式
            $("#typeSelect li").removeClass("active");
            // 为自己添加active样式
            $(this).addClass("active");
            // 发送请求
            sendAjax(pageNum,pageSize,0);
        });

        // 搜索框事件
        $("#search_button").click(function () {
            // 发送请求
            sendAjax(pageNum,pageSize,0);
        });


    })

   function sendAjax(pageNum,pageSize,showStatus) {
        // 获取电影类型
        var movieType = $("#typeSelect .active").text();
        // 获取电影地区
        var areaName =  $("#areaSelect .active").text();
        // 获取电影名字
        var movieName = $("#search_input").val();
        // 获取导演名字
        // var directorName = $("#search_input").val();

        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/movies/getByPage",
            type:"GET",
            contentType:"application/json",
            data:{pageNum:pageNum,
                pageSize:pageSize,
                showStatus:showStatus,
                movieType:movieType,
                areaName:areaName,
                movieName:movieName
            },
            dataType:"json",
            success:function(result){
                console.log(result);
                //拼接查询到的信息
                var content = "";

                $.each(result.list,function (index,Movie){
                    content += "<div class=\"iamge_movies\" >\n" +
                        "                        <div class=\"image_3\"  style=\"width:197px;height: 274px\">\n" +
                        "                             <a href=\"../front/details.jsp?movieId=" + Movie.movieId + "\">" +
                        "                               <img src=\"../fileDownload/" + Movie.moviePicture +"\" class=\"image\">\n" +
                        "                            </a>" +
                        "                            <div class=\"middle playnow_bt\">\n" +
                        "                                <li><span class=\"director there_text\">导演:"+ Movie.director.directorName +"</span></li>\n" +
                        "                                <li><span class=\"actor there_text\">演员:";
                    $.each(Movie.actorList,function(index,Actor){
                        content += Actor.actorName + ",";
                    })

                    content += "</span></li>\n" +
                        "                                <li><span class=\"movieType there_text\">类型:" + Movie.movieType +"</span></li>\n" +
                        "                                <li><span class=\"area there_text\">地区:" + Movie.area.areaName + "</span></li>\n" +
                        "                                <li><span class=\"playTime there_text\">片长:" + Movie.playTime + "</span></li>\n" +
                        "                                <li><span class=\"moviePrice there_text\">票价:" + Movie.moviePrice + "</span></li>\n" +
                        "                            </div>\n" +
                        "                            <h1 class=\"movieName code_text\">" + Movie.movieName + "</h1 >\n" +
                        "                            <p class=\"storyIntroduce there_text\" style=\"display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;work-wrap:break-word;overflow:hidden;text-overflow:ellipsis\" >电影简介:" + Movie.storyIntroduce.substring(0,10) + "......</p>\n" +
                        "                        </div>\n" +
                        "                     </div>"
                })
                $("#hotMovies").html(content);

                // 分页数据渲染
                var pageContent = "";
                // 默认样式：已经是当前页则会点亮,使用span标签设置为class="disable"不可用状态,其他使用a标签,可用状态
                // 上一页
                if (result.pageNum == 1){
                    pageContent = "<span class=\"disabled\" title=\"1\"> &lt; </span>";
                } else {
                    pageContent = "<a href=\"javascript:;\" title=\""+result.prePage+"\"> &lt; </a>";
                }
                // 页码
                for(var i=1;i<=result.pages;i++){
                    if(result.pageNum == i){
                        pageContent += "<span class=\"current\" title=\""+i+"\">"+i+"</span>";
                    }else{
                        pageContent +="<a href=\"javascript:;\" title=\""+i+"\">"+i+"</a>"
                    }
                }
                // 下一页
                if(result.pageNum == result.pages) {
                    pageContent += "<span class=\"disabled\" title=\"" + result.pages + "\"> &gt;</span>";
                } else {
                    pageContent += "<a href=\"javascript:;\" title=\""+result.nextPage+"\">&gt;</a>";
                }
                $("#black1").html(pageContent);
            },
            //请求失败时的响应函数
            error:function(){
                alert("异步请求失败!");
            }
        });
        
   }

   function sendAjax2(pageNum,pageSize,showStatus) {
       $.ajax({
           async:true,
           url:"${pageContext.request.contextPath}/movies/getByPage",
           type:"GET",
           contentType:"application/json",
           data:{pageNum:pageNum,
               pageSize:pageSize,
               showStatus:showStatus
           },
           dataType:"json",
           success:function(result){
               console.log(result);
               //拼接查询到的信息
               var content = "";

               $.each(result.list,function (index,Movie){
                   content += "<div class=\"iamge_movies\" >\n" +
                       "                        <div class=\"image_3\"  style=\"width:197px;height: 274px\">\n" +
                       "                             <a href=\"../front/details.jsp?movieId=" + Movie.movieId + "\">" +
                       "                               <img src=\"../fileDownload/" + Movie.moviePicture +"\" class=\"image\">\n" +
                       "                            </a>" +
                       "                            <div class=\"middle playnow_bt\">\n" +
                       "                                <li><span class=\"director there_text\">导演:"+ Movie.director.directorName +"</span></li>\n" +
                       "                                <li><span class=\"actor there_text\">演员:";
                   $.each(Movie.actorList,function(index,Actor){
                       content += Actor.actorName + ",";
                   })

                   content += "</span></li>\n" +
                       "                                <li><span class=\"movieType there_text\">类型:" + Movie.movieType +"</span></li>\n" +
                       "                                <li><span class=\"area there_text\">地区:" + Movie.area.areaName + "</span></li>\n" +
                       "                                <li><span class=\"playTime there_text\">片长:" + Movie.playTime + "</span></li>\n" +
                       "                                <li><span class=\"moviePrice there_text\">票价:" + Movie.moviePrice + "</span></li>\n" +
                       "                            </div>\n" +
                       "                            <h1 class=\"movieName code_text\">" + Movie.movieName + "</h1 >\n" +
                       "                            <p class=\"storyIntroduce there_text\" style=\"display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;work-wrap:break-word;overflow:hidden;text-overflow:ellipsis\" >电影简介:" + Movie.storyIntroduce.substring(0,10) + "......</p>\n" +
                       "                        </div>\n" +
                       "                     </div>"
               })
               $("#waitMovies").html(content);

               // 分页数据渲染
               var pageContent = "";
               // 默认样式：已经是当前页则会点亮,使用span标签设置为class="disable"不可用状态,其他使用a标签,可用状态
               // 上一页
               if (result.pageNum == 1){
                   pageContent = "<span class=\"disabled\" title=\"1\"> &lt; </span>";
               } else {
                   pageContent = "<a href=\"javascript:;\" title=\""+result.prePage+"\"> &lt; </a>";
               }
               // 页码
               for(var i=1;i<=result.pages;i++){
                   if(result.pageNum == i){
                       pageContent += "<span class=\"current\" title=\""+i+"\">"+i+"</span>";
                   }else{
                       pageContent +="<a href=\"javascript:;\" title=\""+i+"\">"+i+"</a>"
                   }
               }
               // 下一页
               if(result.pageNum == result.pages) {
                   pageContent += "<span class=\"disabled\" title=\"" + result.pages + "\"> &gt;</span>";
               } else {
                   pageContent += "<a href=\"javascript:;\" title=\""+result.nextPage+"\">&gt;</a>";
               }
               $("#black2").html(pageContent);
           },
           //请求失败时的响应函数
           error:function(){
               alert("异步请求失败!");
           }
       });
   }
</script>
</body>
</html>
